<template>
	<view>
		<view class="blog">
			<view class="head">
				<view class="head-left">
					<view class="user-icon">
						<image :src="giveSrc(item)" class="user-pic"></image>
					</view>
					<view class="user-name">
						{{giveName(item)}}
					</view>
					<view class="post-time">
						<uni-dateformat :date="item.publish_date" format="MM/dd hh:mm" :threshold="[60000,3600000]">
						</uni-dateformat>
					</view>
				</view>
				<view class="head-right">
					<image src="../../static/more.png" class="right-pic" @click="showSheet"></image>
				</view>
			</view>
			<view class="body" @click="gotoDetail">
				<view class="art-title">
					{{item.title}}
				</view>
				<view class="art-content">
					{{item.description}}
				</view>
				<view class="pic-box">
					<view class="pic" :class="item.picurls.length === 1 ? 'only':''" v-for="(item2,i2) in item.picurls"
						:key="i2">
						<image :src="item2" class="pic-item"></image>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="browse">
					<image src="../../static/preview-open.png" class="bro-pic"></image>
					<view class="bro-text">{{item.view_count}}</view>
				</view>
				<view class="comment" @click="gotoDetail">
					<image src="../../static/comment-one.png" class="com-pic"></image>
					<view class="com-text">{{item.comment_count ? item.comment_count:"评论"}}</view>
				</view>
				<view class="like" :class="item.isLike ? 'active' :''" @click="clickLike">
					<image src="../../static/like.png" class="like-pic"></image>
					<view class="like-text">{{item.like_count ? item.like_count :"点赞"}}</view>
				</view>
			</view>
			<u-action-sheet :actions="list" :show="show" cancelText="取消"
			:closeOnClickAction="true" :closeOnClickOverlay="true"
			@select="sheetSelect"
			@close="onClose"
			></u-action-sheet>
			<!-- <u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet> -->
		</view>

	</view>
</template>

<script>
	import {store} from '@/uni_modules/uni-id-pages/common/store.js'
	import {likeFunc} from '../../utils/tools.js'
	const db = uniCloud.database()
	import {
		giveName,
		giveSrc
	} from '../../utils/tools.js'
	export default {
		name: "blog-item",
		props: {
			item: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		data() {
			return {
				list: [{
					"name":"修改",
					"type":"edit",
					"disabled":"true"
				}, {
					"name":"删除",
					"type":"del",
					"color":"#ff3815",
					"disabled":"true"
				}],
				show: false
			};
		},
		methods: {
			clickLike(){
				//this.$emit("changeLike",true)
				if(!store.hasLogin){
					uni.showModal({
						title:"请先登录！"
					})
					return
				}
				let time = Date.now()
				if(time - this.likeTime < 2000){
					uni.showToast({
						title:"操作太频繁，请稍后...",
						icon:'none'
					})
					return;
				}
				this.likeTime = time
				
				this.item.isLike ? this.item.like_count-- : this.item.like_count++;
				this.item.isLike = !this.item.isLike
				likeFunc(this.item._id)
				
			},
			giveName,
			giveSrc,
			gotoDetail() {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + this.item._id
				})
			},
			showSheet(){
				this.show = true
				console.log(this.show)
				let uid = uniCloud.getCurrentUserInfo().uid
				
				if(uid == this.item.user_id[0]._id || this.uniIDHasRole('admin') || this.uniIDHasRole('webmaster')){
					this.list.forEach(item=>{
						item.disabled = false
					})
				}
			},
			sheetSelect(e){
				this.show = false
				console.log(e)
				if(e.type == "del"){
					this.delFun()
				}
			},
			onClose(){
				this.show = false
			},
			delFun(){
				uni.showLoading({
					title:"加载中..."
				})
				db.collection("quanzi_article").doc(this.item._id).update({
					delState : true
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"删除成功",
						icon:'none'
					})
					this.$emit("delEvent",true)
				}).catch(err=>{
					uni.hideLoading()
				})
			}
			// showSheet() {
			// 	uni.showActionSheet({
			// 		itemList: ["修改", "删除"],
			// 		success: function(res) {
			// 			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			// 		},
			// 		fail: function(res) {
			// 			console.log(res.errMsg);
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.blog {

		.head {
			display: flex;
			justify-content: space-between;

			.head-left {
				display: flex;
				align-items: center;
				height: 100rpx;

				.user-icon {
					width: 60rpx;
					height: 60rpx;

					.user-pic {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-name {
					font-size: 30rpx;
					padding-left: 30rpx;
				}

				.post-time {
					font-size: 24rpx;
					color: #6b6b6b;
					padding-left: 30rpx;
				}
			}

			.head-right {
				height: 60rpx;
				width: 60rpx;

				.right-pic {
					width: 100%;
					height: 100%;
				}
			}
		}

		.body {
			padding: 15rpx 0 15rpx 0;

			.art-title {
				font-size: 44rpx;
				color: #000;
				font-weight: 600;
				text-align: justify;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;

				padding-bottom: 20rpx;
			}

			.art-content {
				text-align: justify;
				font-size: 30rpx;
				color: #888;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				margin-bottom: 10rpx;
			}

			.pic-box {
				display: flex;
				//justify-content: space-between;
				padding: 20rpx 30rpx 20rpx 30rpx;

				.pic {
					width: 200rpx;
					height: 200rpx;
					//background-color: #6b6b6b;
					overflow: hidden;
					margin-right: 10rpx;

				
					.pic-item {
						width: 100%;
						height: 100%;
					}

					&:first-child {
						border-radius: 20rpx 0 0 20rpx;
					}

					&:last-child {
						border-radius: 0 20rpx 20rpx 0;
					}
					
					&.only {
						border-radius: 20rpx;
					}
					
				}
			}
		}

		.info {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-bottom: 20rpx;

			.browse {

				width: 32%;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.bro-pic {
					width: 50rpx;
					height: 50rpx;
				}

				.bro-text {
					padding-left: 10rpx;
				}
			}

			.comment {
				width: 32%;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.com-pic {
					width: 50rpx;
					height: 50rpx;
				}

				.com-text {
					padding-left: 10rpx;
				}
			}

			.like {
				width: 32%;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				

				.like-pic {
					width: 50rpx;
					height: 50rpx;
				}

				.like-text {
					padding-left: 10rpx;
				}
			}
			
			.like.active{
				color: #55aa7f;
			}
		}
	}
</style>
